<template>
	<view class="wap">
		<view class="variety-navigation">
			<!-- <view class="variety-swiper">
				<swiper class="menu-swiper h200" style="height: 100%;">
					
					<swiper-item v-for="(item1,index1) in cat_list" :key="index1"  class="flex swiper-iteme"
						style="position: absolute; width: 100%; height: 100%; transform: translate(100%, 0px) translateZ(0px);">
						<view class="menu-lg" @click="catChange(item2.id);"  v-for="(item2,index2) in item1" :key="index2">
							<image :src="item2.image">
							</image>
							<view class="">{{item2.name}}</view>
						</view>
						
					</swiper-item>

				</swiper>
			</view> -->
			<view class="variety-text">
				<view class="variety-navigation-icons flex-y-center">
					<view class="flex-y-center" style="margin-right: 10px;" @click="juliChange()">
						<view>距离</view>
						<image src="@/static/img/jiang.png" class="variety-image"
							:class="[juliup==true?'arrowup':'arrowdown']">
						</image>
					</view>
					<view class="flex-y-center" style="margin-right: 10px;" @click="jiageChange()">
						<view>价格</view>
						<image src="@/static/img/jiang.png" class="variety-image"
							:class="[jiageup==true?'arrowup':'arrowdown']">
						</image>
					</view>
				</view>
			</view>
		</view>

    <view class="page-storeList">
      <view class="page-storeItem" v-for="(item,index) in data.data_list" :key="index" @click="storeTap(index)">
        <image class="storeItem-pic" :src="item.image" mode="aspectFill"></image>
        <view class="storeItem-child">
          <view class="child-title">{{ item.name }}</view>
<!--          <view class="child-address">
            <image class="address-icon" mode="widthFix" src="@/static/img/address-gray-ico.png"></image>
            <view class="address-text">{{ item.address }}</view>
          </view>
          <view class="child-vip">
            <view class="vip-icon">
              <image class="icon-pic" src="/static/img/vipIndex.png"></image>
            </view>
            <view class="vip-text">开通VIP享{{ item.pay_fee }}奖{{ item.vip_cash_back }}</view>
          </view> -->
          <view class="child-one">
            <view class="one-left">
              <view class="left-type" v-if="item.platform==='meituan'">美团</view>
              <view class="left-type left-type--elm" v-if="item.platform==='eleme'">饿了么</view>
              <view class="left-label">可报名{{ item.open_start }} - {{ item.open_end }}</view>
            </view>
            <view class="one-distance">{{ item.distance }}</view>
          </view>
          <view class="child-bottom">
            <view class="bottom-text">实付{{ item.pay_fee }}奖{{ item.vip_cash_back }}</view>
            <view class="bottom-btn">
              <view class="btn-text">抢单</view>
              <view class="btn-progress">
                <view class="progress-bar" :style="'width: ' + (item.stock / (item.total_stock * 1)) * 100 + '%'"></view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>

		<view v-if="false">
			<view class="store-list">
				<view class="store-item" v-for="(item,index) in data.data_list" :key="index" @click="storeTap(index)">
					<view class="goods_brand" style="background-color: rgb(255, 215, 5);"
						v-if="item.platform=='meituan'">
						<image src="@/static/img/meituan1.png">
						</image>
						<text class="name">美团</text>
					</view>
					<view class="goods_brand" style="background-color: rgb(33, 149, 255);"
						v-if="item.platform=='eleme'">
						<image src="@/static/img/elm1.png">
						</image>
						<text class="name">饿了么</text>
					</view>
					<view style="padding: 9px 12px;position: relative;overflow: hidden;z-index: 7;background: #fff;">
						<view class="rules-num" v-if="item.activity_count>1">
							<text><span>活动数{{item.activity_count}}</span></text>
						</view>
						<view class="head-item border-bottom info-item">
							<view class="item-left">
								<view class="mask" v-if="item.open_buy=='0'">
									<image src="@/static/img/weizhifu.png" class="mask-img">
									</image>
								</view>
								<view class="mask" v-if="item.stock<=0">
									<image src="@/static/img/out-of-stock.png" class="mask-img">
									</image>
								</view>
								<image class="head-img" :src="item.image">
								</image>
							</view>
							<view class="item-right">
								<view class="item">
									<view class="title">{{item.name}}</view>
								</view>
								<view class="item">
									<view>还剩<text class="stock-text">
											{{item.stock}}</text>份</view>
									<view class="progress">
										<progress :percent="item.percent" activeColor="rgb(255, 150, 42)"
											stroke-width="8" border-radius="16"
											backgroundColor="rgba(255, 150, 42, 0.5)">
										</progress>

									</view>
								</view>
								<view class="item">
									<view class="distance-text">{{item.distance?'距离：'+item.distance:''}}</view>
									<view class="time-region">可报名 {{item.open_start}}-{{item.open_end}}</view>
								</view>
							</view>
						</view>
						<view class="head-item border-bottom cashback-item">
							<!-- <view class="icon discount-text">送</view> -->
						<!-- 	<view class="text" style="margin-left:84px ;">会员满<text class="amount">
									{{item.vip_pay_fee}}</text>奖:<text class="amount">
									{{item.vip_cash_back}}</text>
							</view> -->
							<view class="text">满<text class="amount">
									{{item.pay_fee}}</text>奖:<text class="amount">
									{{item.cash_back}}</text>
							</view>
							<!-- <view>
								<image class="icon" src="@/static/img/elm-logo-ico.png" v-if="item.platform=='eleme'">
								</image>
								<image class="icon" src="@/static/img/mt-logo-ico.png" v-if="item.platform=='meituan'">
								</image>
							</view> -->
						</view>
						<view class="head-item border-bottom address-item">
							<image class="icon" src="@/static/img/address-gray-ico.png">
							</image>
							<view class="address-text">{{item.address}}</view>
						</view>
					</view>
				</view>
			</view>

		</view>
		<!-- <view>
			<view class="bottom-text">我也是有底线的</view>
		</view> -->
		<view v-if="data.no_list" class="bottom-text">暂无数据</view>
		<view class="bottom-text" v-if="!data.no_list&&data.no_more">我也是有底线的~</view>
		<view class="bottom-text" style="color: #888;" v-if="!data.no_list&&!data.no_more">
			加载中...
		</view>

	</view>
</template>

<script>
	import {
		getStoreList,
		getStoreCat,
		getTagInfo
	} from '../../apirequest/api.js';
	export default {
		data() {
			return {
				data: {
					data_list: [],
					no_list: !1,
					no_more: !1,
					current_page: 0,
					loading_more: !0,
				},
				lock: 0,
				juliup: false,
				jiageup: false,
				sort: 0,
				latitude: '',
				longitude: '',
				tag_id: 0,
				cat_list: [],
			}
		},

		onLoad(options) {
			this.longitude = uni.getStorageSync('longitude');
			this.latitude = uni.getStorageSync('latitude');
			this.tag_id = options.tag || 0;
			getTagInfo({
				id: this.tag_id
			}).then((res) => {
				if (res.code == 1) {
					uni.setNavigationBarTitle({
						title: "店铺列表",
					});
				}
			}).catch(err => {
				console.log(err)
			})

			this.loadDataList();
		},
		onShow() {
			this.loadData();
		},
		/**
		 * 页面上拉触底事件的处理函数
		 */
		onReachBottom: function(t) {
			var o = this;
			o.loadDataList(function() {
				o.data.loading_more = !0;
			});
		},
		methods: {
      //判断图片是否存在
      CheckImgExists(url) {
        let ImgObj = new Image();
        ImgObj.src = url;
        console.log(ImgObj.width, "----")
        //存在图片
        if (ImgObj.width > 0 && ImgObj.height > 0) {
          return url;
        } else {
          return require('@/static/img/noPic.png');
        }
      },
			catChange(id) {
				this.cat_id = id;
				this.data = {
					data_list: [],
					no_list: !1,
					no_more: !1,
					current_page: 0,
					loading_more: !0,
				}
				this.loadDataList();
			},
			juliChange() {
				if (this.juliup == false) {
					this.juliup = true
				} else {
					this.juliup = false
				}
				this.sort = 1
				this.data = {
					data_list: [],
					no_list: !1,
					no_more: !1,
					current_page: 0,
					loading_more: !0,
				}
				this.loadDataList();
			},
			jiageChange() {
				if (this.jiageup == false) {
					this.jiageup = true
				} else {
					this.jiageup = false
				}
				this.sort = 2
				this.data = {
					data_list: [],
					no_list: !1,
					no_more: !1,
					current_page: 0,
					loading_more: !0,
				}
				this.loadDataList();
			},
			//获取数据
			loadData: function() {
				getStoreCat({}).then((res) => {
					if (res.code == 1) {
						this.cat_list = res.data;
					}
				}).catch(err => {
					console.log(err)
				})

			},
			//获取数据列表
			loadDataList: function(f) {
				var o = this;
				// if (!o.longitude || !o.latitude) {
				// 	return;
				// }
				if (o.lock) {
					return;
				}
				if (o.data.no_list || o.data.no_more) "function" == typeof t && f();
				else {
					var page = (o.data.current_page || 0) + 1;
					var data = {
						page: page,
						latitude: o.latitude,
						longitude: o.longitude,
						tag_id: o.tag_id,
						juliup: o.juliup ? 1 : 0,
						jiageup: o.jiageup ? 1 : 0,
						category_id: o.cat_id,
						sort: o.sort,
					}
					o.lock = 1;
					console.log(o.lock)
					getStoreList(data).then((t) => {
						if (t.code == 1) {
							if (1 == t.data.current_page && !t.data.data.length) {
								o.data.no_list = !0;
								o.data.loading_more = !1
							}
							if (t.data.data && t.data.data.length) {
								o.data.data_list = o.data.data_list || [];
								o.data.data_list = o.data.data_list.concat(t.data.data),
									o.data.current_page = page;
							}
							if (!t.data.has_more) {
								o.data.no_more = !0;
							}

						} else {
							uni.showToast({
								title: '网络繁忙',
								icon: 'error'
							})
						}
						o.lock = 0;
					});
				}
			},
			storeTap(index) {
				let this_item = this.data.data_list[index];
				if (!this_item) {
					return;
				}
				if (parseInt(this_item.open_buy) == 0) {
					let time = this_item.open_start + "-" + this_item.open_end;
					uni.showToast({
						icon: 'none',
						title: '未到报名时间，报名时间' + time,
						duration: 2000
					});

				} else if (parseInt(this_item.stock) <= 0) {
					uni.showToast({
						icon: 'none',
						title: '今日名额已抢光',
						duration: 2000
					})
				} else {
					this.distance = this_item.distance;
					uni.navigateTo({
						url: '/pages/details/details?id=' + this_item.store_id
					})
				}

			},
		},
	}
</script>

<style scoped lang="scss">
.page-storeList {
  box-sizing: border-box;
}

.page-storeItem {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  box-sizing: border-box;
  padding: 30rpx;
  .storeItem-pic {
    width: 160rpx;
    height: 160rpx;
    flex-shrink: 0;
    border-radius: 20rpx;
    background-color: #FFFFFF;
    overflow: hidden;
  }
  .storeItem-child {
    width: 100%;
    font-size: 28rpx;
    color: #999999;
    margin-left: 20rpx;
    .child-title {
      font-size: 30rpx;
      font-weight: bold;
      color: #333333;
      display:-webkit-box;
      -webkit-line-clamp: 1;
      -webkit-box-orient:vertical;
      overflow:hidden;
      word-break: break-all;
    }
    .child-one {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 20rpx;
      .one-left {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        font-size: 24rpx;

        .left-type {
          border: 2rpx solid #fdd900;
          background-color: #fdd900;
          padding: 4rpx 10rpx;
          border-radius: 10rpx;
          color: #333333;
          margin-right: 10rpx;
        }
        .left-type--elm {
          color: #fff;
          border-color: #02b6fd;
          background-color: #02b6fd;
        }
        .left-label {
          font-size: 26rpx;
          border: 2rpx solid #ff8546;
          color: #ff8546;
          border-radius: 10rpx;
          padding: 2rpx 10rpx;
        }
      }
    }
    .child-vip {
      display: inline-flex;
      justify-content: flex-start;
      align-items: center;
      margin-top: 20rpx;
      .vip-icon {
        width: 40rpx;
        height: 40rpx;
        margin-right: -10rpx;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border: 2rpx solid #666666;
        background-color: #333333;
        border-radius: 50%;
        position: relative;
        z-index: 1;
        .icon-pic {
          width: 70%;
          height: 70%;
        }
      }
      .vip-text {
        padding: 2rpx 20rpx;
        background-color: #333333;
        border: 2rpx solid #666666;
        font-size: 20rpx;
        color: #fee09e;
        border-radius: 0 40rpx 40rpx 0;
      }
    }
    .child-address {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      font-size: 28rpx;
      color: #666666;
      margin-top: 20rpx;
      .address-icon {
        width: 36rpx;
        height: 36rpx;
        margin-right: 10rpx;
        flex-shrink: 0;
      }
      .address-text {
        display:-webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient:vertical;
        overflow:hidden;
        word-break: break-all;
      }
    }

    .child-bottom {
      display: flex;
      align-items: center;
      justify-content: space-between;
      box-sizing: border-box;
      background-color: #ff8546;
      border-radius: 10rpx;
      margin-top: 20rpx;
      overflow: hidden;
      .bottom-text {
        font-size: 30rpx;
        color: #FFFFFF;
        padding: 0 30rpx;
      }
      .bottom-btn {
        background-color: #333333;
        color: #fee09e;
        font-size: 28rpx;
        padding: 20rpx 40rpx 20rpx 40rpx;
        text-align: center;
        transform: skewX(-20deg) translateX(20rpx);
        border-left: 8rpx solid #FFFFFF;
        .btn-text {
          display: inline-block;
          transform: skewX(20deg);
        }
        .btn-progress {
          width: 150rpx;
          height: 10rpx;
          border-radius: 10rpx;
          background-color: rgba(255,255,255,0.5);
          margin-top: 10rpx;
          transform: skewX(20deg);
          position: relative;
          overflow: hidden;
          .progress-bar {
            width: 50%;
            height: 100%;
            border-radius: 10rpx;
            background-color: #fee09e;
          }
        }
      }
    }
  }
}
</style>

<style>
	.active {
		color: #f42f2f
	}

	.wap .variety-navigation {
		margin: 30rpx;
		background-color: #fff;
		border-radius: 10px
	}

	.wap .variety-navigation .variety-swiper {
		height: 90px;
		background-color: #fff;
		font-size: 24rpx;
		border-radius: 10px;
		padding: 7px 0
	}

	.wap .variety-navigation .variety-swiper .menu-lg {
		width: 20%;
		display: flex;
		flex-flow: column;
		align-items: center
	}

	.wap .variety-navigation .variety-swiper .menu-lg image {
		width: 50px;
		height: 50px;
		border-radius: 10px
	}

	.wap .variety-navigation .variety-swiper .menu-lg .active {
		color: #f42f2f
	}

	.wap .variety-navigation .variety-swiper .add-f-s {
		text-align: center;
		position: relative;
		left: 0;
		right: 0;
		top: -20px
	}

	.wap .variety-text {
		border-top: 1px solid #f4f5f7;
		padding: 15px;
		color: #afb0b1;
		font-size: 26rpx
	}

	.wap .variety-text .variety-image {
		margin: 0px 5px;
		width: 12px;
		height: 12px
	}

	.wap .variety-text .arrowup {
		-webkit-transform: rotate(180deg);
		transform: rotate(180deg)
	}

	/* 主题色 */
	.meituan {
		color: #333 !important;
		background-color: #ff8546
	}

	.elem {
		color: #fff !important;
		background-color: #00a9e9
	}

	.amount {
		color: #f96456;
		font-weight: 700;
		margin: 0 2px
	}

	.store-list {
		display: flex;
		flex-flow: column
	}

	.store-list .store-item {
		border-radius: 9px;
		background-color: #fff;
		margin: 0 40px 9px 14px;
		// padding: 9px 12px;
		position: relative;
		z-index: 8;
		background: #fff;
		/* 信息项 */
		/* 返现项 */
		/* 更多项 */
		/* 地址项 */
		/* 底部项 */
	}

	.store-list .store-item .head-item {
		display: flex;
		padding: 5px 0
	}

	.store-list .store-item .rules-num {
		position: absolute;
		background: linear-gradient(270deg, #ec5151 0, #ff5e3c 45%, #ffb15f);
		color: #fff;
		font-size: 9px;
		padding: 2px 14px;
		-webkit-transform: rotate(45deg);
		transform: rotate(45deg);
		top: 7px;
		right: -15px
	}

	.store-list .store-item .info-item {
		padding-top: 0
	}

	.store-list .store-item .info-item .item-left {
		position: relative
	}

	.store-list .store-item .info-item .item-left .region-name {
		position: absolute;
		top: -3px;
		right: -2px;
		color: #fff;
		font-size: 24rpx;
		border-radius: 16px 0 0 16px;
		width: 44px;
		height: 16px;
		text-align: center
	}

	.store-list .store-item .info-item .item-left .mask {
		width: 100%;
		height: 60px;
		border-radius: 8px;
		background-color: rgba(0, 0, 0, .7);
		position: absolute;
		z-index: 99;
		display: flex;
		align-items: center;
		justify-content: center
	}

	.store-list .store-item .info-item .item-left .mask .mask-img {
		width: 60px;
		height: 30px
	}

	.store-list .store-item .info-item .item-left .head-img {
		width: 80px;
		height: 60px;
		display: block;
		border-radius: 10px
	}

	.store-list .store-item .info-item .item-right {
		margin-left: 10px;
		width: 100%;
		display: flex;
		flex-flow: column
	}

	.store-list .store-item .info-item .item-right .item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 24rpx
	}

	.store-list .store-item .info-item .item-right .item .title {
		color: #333;
		font-size: 34rpx;
		font-weight: 700
	}

	.store-list .store-item .info-item .item-right .item .stock-text {
		color: #ff962a;
		font-weight: 700;
		font-size: 28rpx;
		margin: 0 7px
	}

	.store-list .store-item .info-item .item-right .item .progress {
		width: 125px
	}

	.store-list .store-item .info-item .item-right .item .distance-text {
		color: #bec1c7
	}

	.store-list .store-item .info-item .item-right .item .time-region {
		width: 125px;
		padding: 2px 0;
		color: #fff;
		background-color: #8fc926;
		text-align: center;
		border-radius: 2px
	}

	.store-list .store-item .cashback-item {
		justify-content: space-between;
		align-items: center;
			margin-left: 85px;
	}

	.store-list .store-item .cashback-item .icon {
		width: 20px;
		height: 20px
	}

	.store-list .store-item .cashback-item .discount-text {
		background-color: #f96456;
		color: #fff;
		border-radius: 5px;
		text-align: center;
		line-height: 20px;
		font-size: 26rpx
	}

	.store-list .store-item .cashback-item .text {
		color: #333;
		font-size: 24rpx
	}

	.store-list .store-item .more-item {
		align-items: center;
		justify-content: center
	}

	.store-list .store-item .more-item .more-text {
		color: #bec1c7;
		font-size: 24rpx;
		margin-right: 7px
	}

	.store-list .store-item .address-item .icon {
		width: 20px;
		height: 20px
	}

	.store-list .store-item .address-item .address-text {
		color: #bec1c7;
		font-size: 24rpx;
		margin-left: 7px
	}

	.store-list .store-item .footer-item {
		padding-bottom: 0;
		color: #f96456;
		align-items: center;
		justify-content: center;
		font-size: 28rpx
	}

	.store-list .store-item .goods_brand {
		width: 43px;
		border-radius: 0px 7px 7px 0px;
		position: absolute;
		top: 0px;
		right: -31px;
		z-index: 7;
		height: 100%;
	}

	.store-list .store-item .goods_brand image {
		width: 21px;
		height: 21px;
		margin-top: 9px;
		margin-left: 18px;
	}

	.store-list .store-item .goods_brand .name {
		display: block;
		width: 16px;
		position: absolute;
		top: 38px;
		right: 8px;
		line-height: 1.4em;
		word-wrap: break-word;
		font-size: 16px;
		font-weight: 600;
		color: #fff;
	}
</style>
